<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width,initial-scale=1,mininmum-scale=1,maximum-scale=1,user-scalable=no" charset='UTF-8' />；



    <title>Document</title>
</head>

<body>




    <style>
        body {
            background: lightgray;
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }

        .wfull{
            width: 100%;
        }
        .hfull{
            height: 100%;
        }


        .page {
            background: white;
        }

        .item {
            padding: 10px;
            display: flex;
        }

        .item .left {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
        }

        .item .left img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
        }

        .item .middle {
            padding: 0px 6px;
        }

        .item  .right{
            display: flex;
            align-items: center;
        }

        .item .right button {
            border: none;
            background: lightgray;
            color: darkblue;
            font-weight: bolder;
            border-radius: 99px;
            padding: 10px;
        }
        .top_bottom_line{
            border-top: 1px solid lightgray;
            border-bottom: 1px solid lightgray;
        }
    </style>

    <ul class="page">
        <li class="item">
            <div class="left">
                <img src="img/Tesla (10).jpeg" alt="">
            </div>
            <div class="middle">
                <h4>部落冲突</h4>
                <p>Lorem ipsum dolor sit amet consectetur </p>
            </div>
            <div class="right">
                <button>Download</button>
            </div>
        </li>

        <li class="item  top_bottom_line ">
            <div class="left">
                <img src="img/Tesla (10).jpeg" alt="">
            </div>
            <div class="middle  ">
                <h4>部落冲突</h4>
                <p>Lorem ipsum dolor sit amet consectetur </p>
            </div>
            <div class="right  ">
                <button>Download</button>
            </div>
        </li>

        <li class="item">
            <div class="left">
                <img src="img/Tesla (10).jpeg" alt="">
            </div>
            <div class="middle">
                <h4>部落冲突</h4>
                <p>Lorem ipsum dolor sit amet consectetur </p>
            </div>
            <div class="right">
                <button>Download</button>
            </div>
        </li>
    </ul>



    <input type="text">



</body>

</html>